// 1.设置对应数量的搜索变量
var searchName = '';
var searchBDate = '';
var searchEDate = '';
var searchUrl = '';


// 2.设置分页变量
var start = 0; // 开始为止
var limit = 5; // 每页显示多少条
var end = 4; // 结束为止
var count = 0; // 一共多少条数据
var currPage = 1; // 当前第几页
var allPage = 0; // 一共多少页

function initMenu() {
	$.ajax({
		url: 'MenuPage',
		type: 'POST',
		data: {
			'searchName': searchName,
			'searchBDate': searchBDate,
			'searchEDate': searchEDate,
			'searchUrl': searchUrl,
			'start': start,
			'limit': limit
		},
		dataType: 'JSON',
		async: true,
		success: function (resp) {
			console.log(resp);
			count = resp.datas.count;
			// 计算页码
			allPage = count % limit == 0 ? count / limit : parseInt(count / limit + 1);
			// 将页码显示到界面上
			var menuPage = document.getElementById('menuPage');
			menuPage.innerHTML = currPage + "/" + allPage;

			var arr = resp.datas.menu;
			menuArr = arr;
			var dataBody = document.getElementById('dataBody');
			dataBody.innerHTML = '';
			for (var i = 0; i < arr.length; i++) {
				dataBody.innerHTML += `<tr>
					<td class="data-td" >
						<input class="selectItem" type="checkbox" />
					</td>
					<td class="data-td" >${arr[i].menuName}</td>
					<td class="data-td" >${arr[i].menuUrl}</td>
					<td class="data-td" >${arr[i].menuPid}</td>
					<td class="data-td" >${arr[i].menuState == 1 ? '启用': '禁用'}</td>
					<td class="data-td" >${getDate(arr[i].menuCtime)}</td>
					<td class="data-td">
						<button class="btn" onclick="deleteMenu(${i})">删除</button>
						<button class="btn" onclick="showModifyFrame(${i})">修改</button>
					</td>
				</tr>`
			}
		},
		error: function (err) {
			alert('请联系管理员!');
		}
	})
}

initMenu();

// 解析时间，因为后端传过来的是数字，需要解析成对应的样式
function getDate(num) {
	if(!num) {
		return '解析错误';
	}
	var d = new Date(num);
	return d.getFullYear() + "-" +
		addZero(d.getMonth() + 1) + "-" +
		addZero(d.getDate()) + " " +
		addZero(d.getHours()) + ":" +
		addZero(d.getMinutes()) + ":" +
		addZero(d.getSeconds()) ;
}
// 补零
function addZero(data) {
	if(data > 9) {
		return data;
	}else {
		return "0" + data;
	}
}
//上一页
function doPre() {
	if(currPage == 1) {
		alert('已经是首页了!');
	}else {
		currPage --;
		start -= limit;
		end -= limit;
		initMenu();
	}
}
//下一页
function doNext() {
	if(currPage == allPage) {
		alert('已经是尾页了!');
	}else {
		currPage ++;
		start += limit;
		end += limit;
		initMenu();
	}
}
//搜索
function doSearch() {
	// 将所有的分页变量全部初始化
	start = 0; // 开始为止
	limit = 5; // 每页显示多少条
	end = 4; // 结束为止
	count = 0; // 一共多少条数据
	currPage = 1; // 当前第几页
	allPage = 0; // 一共多少页
	// 获取搜索框的值，赋值给搜索变量
	searchName = document.getElementById('name').value;
	searchBDate = document.getElementById('bdate').value;
	searchEDate = document.getElementById('edate').value;
	searchUrl = document.getElementById('url').value;
	// 调用初始化方法
	initMenu();
}



//展示新增页面
function showAddFrame(){
	var frame = document.getElementById('addFrame');
	frame.style.display = "flex";
}
//隐藏新增页面
function hideAddFrame(){
	var frame = document.getElementById('addFrame');
	frame.style.display = "none";
}

//保存数据并隐藏新增面板
function saveAddFrame(){
		$.ajax({
			url:'AddMenu',
			type: 'POST',
			async: true,
			data: {
				name : document.getElementById('menuName').value,
				menuUrl: document.getElementById('menuURL').value,
				pid: document.getElementById('Pid').value,
			},
			dataType:'JSON',
			success: function (resp) {
				console.log(resp);
				alert(resp.message);
				if(resp.id > 0) {
					doSearch();
					hideAddFrame();
				}
			},
			error: function (err) {
				alert('请联系管理员saveAddFrame')
			}
		})
}

//删除
function deleteMenu(index){
	console.log(index);
	var dt = confirm("确定删除?");
	if (dt == true) {
		$.ajax({
			url:'DeleteMenu',
			type: 'POST',
			async: true,
			data: {
				id : menuArr[index].menuId
			},
			dataType:'JSON',
			success: function (resp) {
				console.log(resp);
				alert(resp.message);
				if(resp.id > 0) {
					doSearch();
				}
			},
			error: function (err) {
				alert('请联系管理员')
			}
		})
	}
}
//展示修改面板
function showModifyFrame(index){
	console.log(index);
	document.getElementById('modifyFrame').style.display = "flex";
	// 将数据添加到界面上
	document.getElementById('modifyMenuName').value = menuArr[index].menuName;
	document.getElementById('modifyMenuURL').value = menuArr[index].menuUrl;
	document.getElementById('modifyMenuState').value = menuArr[index].menuState == 1 ? '启用': '禁用';
	menuIndex = index;
}
//隐藏修改面板
function hideModifyFrame(){
	var modifyFrame = document.getElementById('modifyFrame');
	modifyFrame.style.display = 'none';
}
//保存修改面板
function savaModifyFrame(){
	var state;
	var state1 = document.getElementById('modifyMenuState').value;
	if (state1=='启用'){
		state=1;
	}else {
		state=2;
	}
	$.ajax({
		url:'editMenuById',
		type: 'POST',
		async: true,
		data: {
			name :  document.getElementById('modifyMenuName').value,
			menuUrl: document.getElementById('modifyMenuURL').value,
			state: state,
			id : menuArr[menuIndex].menuId
		},
		dataType:'JSON',
		success: function (resp) {
			console.log(resp);
			alert(resp.message);
			if(resp.id > 0) {
				doSearch();
				hideModifyFrame();
			}
		},
		error: function (err) {
			alert('请联系管理员saveModifyFrame')
		}
	})
}
//全选按钮的监听
function selectAll(obj){
	var arr = document.getElementsByClassName('selectItem');
	for (var selectItem of arr) {
		selectItem.checked = obj.checked;
	}
}
//删除勾选的项
function removeSelect(){
	var arr = document.getElementsByClassName('selectItem');
	var dt = confirm("确定删除?");
	if(dt==true){
		//遍历选择的项
		for (var i = arr.length-1;i>=0;i--){
			if (arr[i].checked == true) {
				arr[i].parentElement.parentElement.remove();
			}	
		}	
	}
}
